<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>后端首页</title>

		<link rel="stylesheet" href="../css/index.css">
		<script src="../js/vue.min.js"></script>
		<script src="../js/elementui.js"></script>
		<script src="../js/axios.min.js"></script>
		<script src="../js/mycommon.js"></script>

		<style>
			body {
				margin: 0px;
			}

			.el-header {
				border-bottom: 1px gainsboro solid;
				background-image: url('../css/Photo/top.jpg');
			}

			.el-aside {
				position: fixed;
				bottom: 0px;
				top: 60px;
				border-right: 1px gainsboro solid;
			}

			.el-main {
				position: fixed;
				bottom: 0px;
				top: 60px;
				left: 250px;
				right: 0px;
				padding: 0px;

			}

			html {
				box-shadow: 18px 5px 20px rgba(0, 0, 0, 0.3);
				/* 或者使用 inset 阴影效果 */
				/* box-shadow: inset 20px 2px 5px rgba(0, 0, 0, 0.5); */
			}
		</style>


	</head>
	<body>
		<div id="app">
			<el-container>
				<el-header height="60px">
					<el-avatar :size="38" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
						style="position: fixed;top: 10px; left: 1350px;"></el-avatar>
					<div style="position: fixed;top: 20px;left: 1400px;color: aliceblue;">当前用户:【<span
							style="color:black">{{sysusername}}</span>】
						&nbsp;&nbsp;&nbsp;&nbsp;
						<a href="javascript:void(0)" @click="cxdl()" style="color:black"><i
								class="el-icon-s-promotion"></i>重新登录</a>
					</div>
					<div>
						<span style="font-family: '黑体'; font-size: 20px;position: fixed;top: 20px;">物资综合管理系统</span>
					</div>

					<!-- <el-row style="border: 1px solid salmon;">
					    <el-col :span="4">
					        <div class="block">
								<el-avatar :size="58" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
							</div>
							
					    </el-col>  
					    
					  </el-row> -->

				</el-header>
				<el-container>
					<el-aside width="250px">
						<el-input prefix-icon="el-icon-search" size="small" style="" placeholder="输入关键字进行过滤"
							v-model="filterText">
						</el-input>

						<el-tree @node-click="handleNodeClick" :data="treedata" :props="defaultProps" default-expand-all
							:filter-node-method="filterNode" ref="tree">
							<span class="custom-tree-node" slot-scope="{ node, data }">
								<span>
									<!-- <i :class="data.iconclass" style="color: rgb(102, 118, 132);"></i> -->
									{{ node.label }}
								</span>
							</span>
						</el-tree>
					</el-aside>


					<el-main>
						<iframe style="height: 99%;width: 100%;" id="ifr" src="../yjw/shouye.html" frameborder="0">
						</iframe>
					</el-main>
				</el-container>
			</el-container>
		</div>


		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					filterText: '',
					formData: {
						sysusername: "",
						sysuserpwd: ""
					},
					treedata: [],
					defaultProps: {
						children: 'children',
						label: 'label'
					},
					sysusername: undefined

				},
				watch: {
					filterText(val) {
						this.$refs.tree.filter(val);
					}
				},
				methods: {
					filterNode(value, data) {
						if (!value) return true;
						return data.label.indexOf(value) !== -1;
					},
					handleNodeClick(data) {
						if (data.href != undefined) {
							//alert(data.href );
							document.getElementById("ifr").src = data.href;
						}
					},
					cxdl() {
						window.localStorage.removeItem("jwtToken");
						window.location.href = "login.html";

					},
					innt() {
						//获取当前登录用户的权限集合
						//获取当前登录对象的token
						let token = this.formData = window.localStorage.getItem("jwtToken");
						var that = this
						//ajax请求后端接口获取json数据
						axios.post(HTTP + "menu/selectUserMenu", {
							"token": token
						}).then(function(res) {
							//alert(JSON.stringify(res.data.data.menuList));
							let s = arrayToTree(res.data.data.menuList);
							//alert(JSON.stringify(s));
							that.treedata = s
							that.sysusername = res.data.data.sysusername
						}).catch(err => {
							console.log(err)
						});
					}
				},
				mounted() { //vue生命周期的方法
					//发送ajax请求到后端接口，获取json数据
					this.innt()
				}
			})
		</script>

	</body>
</html>